/*
    元素层叠(元素父子关系) : 元素定义结合样式实现叠加完成最终页面呈现效果
    文档流(元素的兄弟关系) : 在固定的元素或整个页面中,兄弟元素直接基于元素规则由上而下,由左而右的方式自动排列
    脱离文档流 : 在正常的页面布局基础上,重新构建一个和原有规则一样的新的页面,并将该页面至于原页面之上或者之下
*/
.box{
    width: 300px;
    height: 64px;
    background-color: #dedede;
    font-size: 24px;
}
.box > span{
    background-color: pink;
}
.box1{
    /*position: absolute;*/
    /*
    float 会脱离基本文档流的结构,但同时会对其它文档流产生影响
        + 影响:不覆盖其它文本流的内容
        + 虽然元素脱离文档流,和其它元素不属于同一个文档范围,但代码元素结构依然不变
        + css 中基于内容的相关伪元素选择器不再对脱离文档流的内进行操作
        + 浮动样式完成元素文档流的脱离只有俩个方向(left,right),但脱离水平范围依然受限于父元素
        + 浮动元素脱离文档流如果需要在垂直范围内受限于父元素，必须为父元素设置BFC容器格式
            - BFC (Block Formatting Context) 区域块格式化上下文
              布局区块设定（ 设置 浮动元素与其他元素交互的区域 ）
              当实现了BFC区块容器时，也就实现了清除浮动操作
            - 使用 clear 专用浮动清除功能
    */
    float: left;
}
.box2{
    background-color: olivedrab;
    /*position: absolute;*/
    float: left;
}
.book-info{
    vertical-align: middle;
    font-size: 18px;
    line-height: 30px;
    color: cornflowerblue;
    border: 1px solid black;
    /*
        min- max- 定义动态宽度或高度，存在最大值和最小值 ;
            固定宽度优先级更高；
            块级元素默认固定宽度为100% - 块级元素不受影响
            行级元素不受影响
    */
    /*display: inline-block;*/
    width: 600px;
    /*min-width: 600px;*/
    /*max-width: 650px;*/
    /*height: 200px;*/
    /*min-height:180px;*/
    /*
        因为float脱离文档流之后，可能会对其它文档流的内容产生显示影响，
        所以因为类容位置的变化可能会造成页面布局的变化
        所以float属性构建的脱离文档流元素，在页面的呈现结果中可能需要限制浮动范围
    */
    /*附带清除浮动功能的样式*/
    /*overflow: hidden;*/
    /*display: inline-block;*/
    /*……*/
}
.book-info::after{
    /*content: "-------------";*/
    /*color: red;*/
    /*
        只用于清除浮动的样式 clear；
        clear:指定一个元素是否必须移动 (清除浮动后) 到在它之前的浮动元素下面
              只能定义在块级元素或宽度为100%的元素
             + none 不清除
             + left 只清除左浮动
             + right 只清除右浮动
             + botn 清除所有浮动
    */
    content: "";
    display: block;
    clear: both;
}
.book-info > img{
    vertical-align: middle;
    /*position: absolute;*/
    float: left;
    /*float: right;*/
    height: 180px;
}
.book-info > h2{
    /*float: left;*/
    float: right;
    /*height: 180px;*/
    writing-mode: vertical-lr;
    color: black;
}
.book-info > div{
    text-indent: 40px;
}
.book-info::first-letter{
    color: brown;
    font-weight: bolder;
    font-size: 26px;
}